<!-- 供应商选择 -->
<template>
  <a-drawer
    :title="title"
    width="650"
    :bodyStyle="{ padding: '0' }"
    :visible="drawerVisible"
    :maskClosable="false"
    @close="onDrawerClose">
    <div class="header-box">
      <span>仅支持选择合格状态并且曾在采购项目中标后的供应商</span>
    </div>
    <div class="custom-ant detail-form-container">
      <a-form-model layout="inline">
        <a-row :gutter="24">
          <a-col :md="12" :sm="24">
            <a-form-model-item label="所属品类">
              <ASelectList style="width:100%;" v-model="examineCategory" :isHasDict="false" :defaultOption="examineCategoryOption" />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
      <a-table
        ref="table"
        rowKey="id"
        size="middle"
        bordered
        :loading="loading"
        :columns="columns"
        :dataSource="dataSource"
        :row-selection="{ fixed: true, selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        :scroll="{ x: 1, y: 500 }"
        :pagination="pagination"
         class="mt-10">
      </a-table>
    </div>
    <div class="footer-box">
      <slot name="footer">
        <a-button type="primary" @click="onConfirm">确定</a-button>
        <a-button :style="{ marginLeft: '8px' }" @click="onCancel">取消</a-button>
      </slot>
    </div>
  </a-drawer>
</template>

<script>
import ListPageMixin from '@/mixins/ListPageMixin.js';

export default {
  name: 'SupplierSelect',
  mixins: [ ListPageMixin ],
  props: {
    title: {
      type: String,
      default: '选择供应商'
    }
  },
  data() {
    return {
      drawerVisible: false,
      examineCategoryOption: [
        { label: '传感器、驱动电机', value: '1' },
      ],
      examineCategory: '1',
      columns: [
        { title: '序号', width: 50, customRender: (text, record, index) => `${index + 1}`, align: 'center' },
        { title: '供应商', dataIndex: 'supplierName', width: 220, ellipsis: true },
        { title: '供应商编号', dataIndex: 'supplierCode', width: 150, ellipsis: true },
        { title: '所属品类', dataIndex: 'examineCategory', width: 150, ellipsis: true },
      ],
      dataSource: [
        { supplierName: '河南盛世机械工具集团有限公司', supplierCode: 'GYS20241208001', examineCategory: '传感器供应商' },
        { supplierName: '广州三五零配件有限公司', supplierCode: 'GYS20241208001', examineCategory: '传感器供应商' },
        { supplierName: '广汽集团广天有限公司', supplierCode: 'GYS20241208001', examineCategory: '传感器供应商' },
        { supplierName: '河南盛世机械工具集团有限公司', supplierCode: 'GYS20241208001', examineCategory: '传感器供应商' },
        { supplierName: '深圳三五零配件有限公司', supplierCode: 'GYS20241208001', examineCategory: '传感器供应商' },
        { supplierName: '深圳集团广天有限公司', supplierCode: 'GYS20241208001', examineCategory: '驱动电机' },
        { supplierName: '盛世机械工具集团有限公司', supplierCode: 'GYS20241208001', examineCategory: '驱动电机' },
        { supplierName: '湛江三五零配件有限公司', supplierCode: 'GYS20241208001', examineCategory: '驱动电机' },
        { supplierName: '广天集团广天有限公司', supplierCode: 'GYS20241208001', examineCategory: '驱动电机' },
        { supplierName: '万盛世机械工具集团', supplierCode: 'GYS20241208001', examineCategory: '驱动电机' },
      ],
    };
  },
  methods: {
    onDrawerOpen() {
      this.drawerVisible = true;
    },
    onDrawerClose() {
      this.drawerVisible = false;
    },
    onConfirm() {
      if (this.selectedRowKeys.length) {
        this.drawerVisible = false;
        this.$message.success(`操作成功`);
        this.$emit('successCallback');
      } else {
        this.$message.error(`请选择供应商！`)
      }
    },
    onCancel() {
      this.drawerVisible = false;
    }
  }
}
</script>


<style lang="less" scoped>
.header-box {
  background-color: rgba(245, 245, 245, 1);
  padding: 6px 30px;
}
.footer-box {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 10px;
  background-color: rgba(31, 127, 227, 0.08);
  display: flex;
  justify-content: center;
}
</style>